<script setup>
import { useTopicDataQuery } from '@/composables/useTopicDataQuery'
import { useRoute, useRouter } from 'vue-router'
import { fetchEditTopic, fetchDeleteTopic } from '@/axios/api/topic'
import LfFormItem from '@/components/commonUI/LfFormItem.vue'
import LfSwitch from '@/components/commonUI/LfSwitch.vue'
import { useTopicManageStore } from '@/stores/TopicManageStore'
import SettingTitle from './components/SettingTitle.vue'
import LfButton from '@/components/commonUI/LfButton.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useUserTopicListQuery } from '@/composables/useUserInfoQuery'
const topicManageStore = useTopicManageStore()
const route = useRoute()
const router = useRouter()
const { data, refetch } = useTopicDataQuery(route.params.topicId)
const { refetch: refetchUserTopicList } = useUserTopicListQuery()

const isPrivate = ref(data.value?.result?.isPrivacy === 1)
const isVerify = ref(data.value?.result?.rest === 1)

const handlePrivateSwitch = (value) => {
  fetchEditTopic({
    id: route.params.topicId,
    isPrivacy: value ? 1 : 0,
  }).then((res) => {
    if (res.code === 0) {
      refetch()
    }
  })
}

const handleVerifySwitch = (value) => {
  if (!value) {
    fetchEditTopic({
      id: route.params.topicId,
      rest: value ? 1 : 0,
    }).then((res) => {
      if (res.code === 0) {
        refetch()
      }
    })
  } else {
    isVerify.value = true
    topicManageStore.showTopicSetting()
    topicManageStore.setTopicSettingData({
      label: '申请问题',
      value: data.value.result.question,
      topicId: route.params.topicId,
    })
  }
}

const handleDeleteTopic = () => {
  ElMessageBox.confirm('解散主题后将不可恢复，确认解散吗？', '解散主题', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    fetchDeleteTopic({
      id: route.params.topicId,
    }).then((res) => {
      if (res.code === 0) {
        refetchUserTopicList()
        ElMessage({
          type: 'success',
          message: '解散成功',
        })
        router.push('/')
      }
    })
  })
}

const handleAvatarClick = () => {
  topicManageStore.showTopicSetting()
  topicManageStore.setTopicSettingData({
    label: '主题头像',
    value: data.value.result.coverImage,
    topicId: route.params.topicId,
  })
}

const handleBgClick = () => {
  topicManageStore.showTopicSetting()
  topicManageStore.setTopicSettingData({
    label: '主题背景',
    value: data.value.result.bgImage,
    topicId: route.params.topicId,
  })
}
</script>

<template>
  <div class="pb-[40px]">
    <SettingTitle title="编辑主题" />
    <div v-if="data" class="flex flex-col gap-4">
      <LfFormItem
        isPrivate
        label="主题名称"
        :maxLength="12"
        placeholder="请输入主题名称"
        :value="data.result.topicName" />

      <LfFormItem
        isPrivate
        label="主题描述"
        type="textarea"
        :maxLength="20"
        placeholder="请输入主题描述"
        :value="data.result.description" />

      <!-- 主题头像 -->
      <div class="border-1 border-[--line-1] rounded-md p-2 flex gap-4 items-center justify-between">
        <div class="">
          <div>主题头像</div>
          <div class="text-sm text-[--text-3]">更改主题头像</div>
        </div>
        <img
          @click="handleAvatarClick"
          :src="data.result.coverImage"
          class="w-[50px] h-[50px] rounded-full object-cover cursor-pointer"
          alt="" />
      </div>

      <!-- 主题封面 -->
      <div class="border-1 border-[--line-1] rounded-md p-2 flex gap-4 items-center justify-between">
        <div class="">
          <div>主题封面</div>
          <div class="text-sm text-[--text-3]">更改主题封面</div>
        </div>
        <img
          @click="handleBgClick"
          :src="data.result.bgImage"
          class="w-[80px] h-[50px] rounded-md object-cover cursor-pointer"
          alt="" />
      </div>

      <div class="flex gap-4 items-center border-1 border-[--line-1] rounded-md p-2 justify-between">
        <div>
          <div>设为私密主题</div>
          <div class="text-sm text-[--text-3]">开启则只有加入主题的用户才能访问主题内容</div>
        </div>
        <LfSwitch v-model="isPrivate" @update:modelValue="handlePrivateSwitch" />
      </div>

      <div class="border-1 border-[--line-1] rounded-md p-2">
        <div class="flex gap-4 items-center justify-between">
          <div>
            <div>开启加入主题版块验证</div>
            <div class="text-sm text-[--text-3]">开启后，用户需要通过管理员审核才能加入主题</div>
          </div>
          <LfSwitch v-model="isVerify" @update:modelValue="handleVerifySwitch" />
        </div>

        <div v-if="isVerify" class="mt-3">
          <LfFormItem
            isPrivate
            label="申请问题"
            type="textarea"
            :maxLength="100"
            placeholder="请输入申请加入主题需要回答的问题"
            :value="data.result.question" />
        </div>
      </div>
    </div>

    <!-- 解散主题 -->
    <div class="flex flex-col gap-4">
      <SettingTitle title="操作主题" />

      <div class="border-1 border-[--line-1] rounded-md p-2 flex gap-4 items-center justify-between">
        <div class="">
          <div>解散主题</div>
          <div class="text-sm text-[--text-3]">解散后，主题将无法访问，且无法恢复</div>
        </div>
        <LfButton type="danger" @click="handleDeleteTopic">解散主题</LfButton>
      </div>
    </div>
  </div>
</template>
